<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>5.字符串基本函数使用</title>

</head>

<body>
  <input type="text" name="password"><span></span>
  <script>
    let name = "houdunren";
    console.log(name.length);
    console.log('houdunren.com'.toUpperCase()); //HOUDUNREN.COM
    console.log('HOUDUNREN.COM'.toLowerCase()); //houdunren.com


    let str = '   houdunren.com  ';
    // 去掉文字中间的空格
    console.log(str.length);
    console.log(str.trim().length);
    // 去掉左右 空格
    let name2 = " houdunren ";
    console.log(name);
    console.log(name2.trimLeft());
    console.log(name2.trimRight());
    //可以使用jquery或者lodash 实现这个效果
    // 去除密码输入框的空格
    let ps = document.querySelector("[name = 'password']");
    ps.addEventListener("keyup", function () {
      this.value = this.value.trim();
      console.log(this.value.length);
      let error = '';
      let span = document.getElementsByTagName("span");
      if (this.value.length < 5) {
        error = '密码不能小于5位';
      }
      span[0].innerHTML = error;
    })
    // 获取指定位置字符
    let hd = "houdunren.com";
    console.log(hd.charAt(0));
    console.log(hd[0]);

    for(let i = 0;i<hd.length;i++) {
      let span = document.createElement("span");
      span.innerHTML = hd[i];
      span.style.fontSize = (i+1)*10+'px';
      document.body.append(span);
    }
  </script>
</body>

</html>